Grokking JavaScript Fundamentals
Rate this course
Ask Author
Contribute
Back to course home

0% completed

Vote For New Content
Introduction
Who should take this course?
Course Overview
Introduction to JavaScript
JavaScript Basics
JavaScript - Hello World
JavaScript - Comments
Quiz
JavaScript Variables and Operators
JavaScript - Variables
JavaScript - Operators
Quiz
JavaScript Conditionals
Introduction to Conditional Statements in JavaScript
JavaScript - If...Else
JavaScript - Switch Case
Quiz
JavaScript Objects
Introduction to Objects in JavaScript
JavaScript - Number
JavaScript - Boolean
JavaScript - Math
JavaScript - Date
Quiz
JavaScript - Functions
Introductions to Function in JavaScript
JavaScript - Variable Scope
JavaScript - Default Parameters
JavaScript - Arrow Functions
Quiz
JavaScript - String and Arrays
Introduction to Strings in JavaScript
JavaScript - String Methods
Introduction to Array in JavaScript
JavaScript - Array Methods
Quiz
JavaScript Loops
Introduction to loops in JavaScript
JavaScript - for loop
JavaScript - while loop
JavaScript - do-while loop
JavaScript - for-in loop
JavaScript - for-of loop
JavaScript - Loop Control
Quiz
JavaScript - Maps and Sets
JavaScript - Maps
JavaScript - Sets
Quiz
Where to Go from Here
JavaScript - Maps

Maps in JavaScript are a collection of keyed data items, just like an Object. However, Maps allow keys of any type, offering more flexibility and power in handling data than Objects. Maps maintain the insertion order of elements, which can be crucial for certain algorithms.

Image

Syntax

To create a Map, you can use the Map() constructor, which optionally accepts an iterable (such as an array) of key-value pairs.

Javascript
. . . .
  • iterable is an Array or any iterable object whose elements are key-value pairs (arrays with two elements).

Example of Creating a Map

Javascript
. . . .
  • Above code initializes a Map fruits with three entries: apples, bananas, and oranges, with their respective quantities.
  • Each item in the array is a key-value pair, showing how Maps can store data in a structured format.

Map Properties in Table Format

Maps come with properties that help to inspect the collection:

PropertyDescription
sizeReturns the number of key/value pairs in the Map object.

Map Methods in Table Format

Maps offer a variety of methods to manipulate the data:

MethodDescription
set(key, value)Adds or updates an element with a specified key and value to the Map object.
get(key)Returns the value associated with the key, or undefined if there is none.
has(key)Returns a boolean asserting whether a value has been associated with the key in the Map object or not.
delete(key)Removes any value associated with the key.
clear()Removes all key/value pairs from the Map object.
entries()Returns a new Iterator object that contains an array of [key, value] for each element in the Map object in insertion order.
keys()Returns a new Iterator object that contains the keys for each element in the Map object in insertion order.
values()Returns a new Iterator object that contains the values for each element in the Map object in insertion order.
forEach(callbackFn[, thisArg])Executes a provided function once per each key/value pair in the Map object, in insertion order.

Examples

Example 1: Using set and get Methods

Javascript

. . . .
  • A Map books is created without any entries.
  • The set method adds two books as keys with their authors as values.
  • The get method retrieves the author of "1984".

Example 2: Checking for a Key with has Method

Javascript

. . . .
  • Above code checks if "1984" is a key in the books Map, returning true because it was added previously.

Map vs. Object Table

Comparing Maps to Objects:

FeatureMapObject
Key TypesAny value typeStrings and Symbols
Order of ElementsMaintains insertion orderNo guaranteed order
Size PropertyYes (size)No, must be computed manually
IterationDirectly iterableRequires fetching keys or values

Maps provide advantages over Objects when a collection of key-value pairs is needed, especially when complex keys or order are important.

Quiz
JavaScript - Sets
Mark as Completed

On this page

Syntax

Example of Creating a Map

Map Properties in Table Format

Map Methods in Table Format

Examples

Example 1: Using set and get Methods

Example 2: Checking for a Key with has Method

Map vs. Object Table